<!--https://www.datazzh.top-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成交内容</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- ECharts 库 -->
    <script src="/static/js/echarts.min.js"></script>
    <!-- 词云扩展 -->
    <script src="/static/js/echarts-wordcloud.min.js"></script>
    <script src="/static/js/papaparse.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .dashboard-header {
            margin-top: 100px;
            margin-bottom: 30px;
        }

        .dashboard-title {
            font-size: 28px;
            font-weight: bold;
            color: #343a40;
            text-align: center;
            margin-bottom: 10px;
        }

        .dashboard-subtitle {
            text-align: center;
            color: #6c757d;
            margin-bottom: 30px;
        }

        .summary-box {
            background: linear-gradient(135deg, #4e73df, #224abe);
            color: white;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            gap: 80px;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .summary-item {
            text-align: center;
            flex: 1;
        }

        .summary-label {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .summary-value {
            font-size: 2.8rem;
            font-weight: 700;
            margin: 0;
        }

        .card {
            border: none;
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
        }

        .card-header.bg-primary {
            background: linear-gradient(135deg, #4e73df, #36b9cc);
            color: white;
        }

        .card-header.bg-info {
            background: linear-gradient(135deg, #36b9cc, #1abc9c);
            color: white;
        }

        .card-header.bg-warning {
            background: linear-gradient(135deg, #f6c23e, #f0932b);
            color: white;
        }

        .card-header.bg-secondary {
            background: linear-gradient(135deg, #54545f, #2c3e50);
            color: white;
        }

        .chart-container {
            width: 100%;
            height: 350px;
            padding: 15px;
        }

        .chart-wrapper {
            height: 100%;
            width: 100%;
        }

        @media (max-width: 992px) {
            .summary-box {
                flex-direction: column;
                gap: 30px;
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .dashboard-title {
                font-size: 24px;
            }
            .summary-value {
                font-size: 2.2rem;
            }
            .chart-container {
                height: 300px;
            }
        }

        @media (max-width: 576px) {
            .summary-value {
                font-size: 1.8rem;
            }
            .chart-container {
                height: 250px;
            }
        }

        #waterfallContainer {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .waterfall-item {
            flex: 0 0 calc(33.333% - 20px);
            margin: 10px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            background-color: white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .waterfall-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        #citySelector {
            background-color: #fff;
            border: 2px solid #4e73df;
            border-radius: 25px;
            padding: 10px 20px;
            font-size: 16px;
            color: #343a40;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            width: 100%;
            max-width: 350px;
            transition: all 0.3s;
        }

        #citySelector:focus {
            outline: none;
            border-color: #36b9cc;
            box-shadow: 0 0 0 3px rgba(54, 185, 204, 0.25);
        }

        #citySelector option {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            color: #343a40;
            cursor: pointer;
        }

        #citySelector option:hover {
            background-color: #e9ecef;
        }

        .select-container {
            position: relative;
            max-width: 350px;
            margin: 0 auto;
        }

        .select-container::after {
            content: "\25BC";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            font-size: 14px;
            color: #4e73df;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <a href="../web/首页.html"><span style="color: #4e73df; font-weight: 700; font-size: 1.5rem;">房产数据可视化</span></a>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#transactionTime">
                            <i class="bi bi-clock me-1"></i>成交时间分布
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#totalPriceBar">
                            <i class="bi bi-currency-yen me-1"></i>成交价格区间
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#unitPriceBar">
                            <i class="bi bi-euro me-1"></i>均价区间分布
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#priceDifference">
                            <i class="bi bi-cash me-1"></i>差价分类（金额）
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#top10Chart">
                            <i class="bi bi-bar-chart me-1"></i>TOP10小区
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#houseTypeCould">
                            <i class="bi bi-grid me-1"></i>户型分布
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-dark" href="#directionRadar">
                            <i class="bi bi-sun me-1"></i>朝向分类
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="dashboard-header text-center">
        <h1 class="dashboard-title">粤港澳大湾区成交房源统计分析</h1>
        <p class="dashboard-subtitle">离线数据可视化分析</p>
    </div>

    <!-- 城市选择器 -->
    <div class="select-container">
        <select id="citySelector" class="form-select form-select-lg">
            <option value="">请选择城市</option>
            <option value="东莞">东莞</option>
            <option value="珠海">珠海</option>
            <option value="广州" selected>广州</option>
            <option value="佛山">佛山</option>
            <option value="中山">中山</option>
            <option value="清远">清远</option>
            <option value="惠州">惠州</option>
            <option value="深圳">深圳</option>
            <option value="湛江">湛江</option>
            <option value="江门">江门</option>
        </select>
    </div>

    <!-- 顶部统计摘要 -->
    <div class="summary-box">
        <div class="summary-item">
            <div class="summary-label">平均成交价格</div>
            <div class="summary-value" id="avgPrice">加载中...</div>
            <div class="summary-label">万元</div>
        </div>
        <div class="summary-item">
            <div class="summary-label">平均均价</div>
            <div class="summary-value" id="avgUnitPrice">加载中...</div>
            <div class="summary-label">元/㎡</div>
        </div>
        <div class="summary-item">
            <div class="summary-label">价格数据状态</div>
            <div class="summary-value" id="priceStatus" style="font-size: 30px">加载中...</div>
        </div>
    </div>

    <!-- 主内容容器 -->
    <div class="container-fluid">

        <!-- 成交时间分布折线图 -->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-primary">
                        <i class="bi bi-clock me-2"></i>成交时间分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="transactionTime"></div>
                    </div>
                </div>
            </div>
            <!-- 成交价格区间分布柱状图 -->
            <!-- 均价区间分布柱状图 & 差价分类（金额）饼图 -->
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-info">
                        <i class="bi bi-currency-yen me-2"></i>成交价格区间分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="totalPriceBar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-warning">
                        <i class="bi bi-euro me-2"></i>均价区间分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="unitPriceBar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-cash me-2"></i>差价分类（金额）
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="priceDifference"></div>
                    </div>
                </div>
            </div>
        </div>



        <!-- TOP10小区柱状折线图 -->
        <div class="row mt-4">
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class="card-header bg-primary">
                        <i class="bi bi-bar-chart me-2"></i>TOP10 小区成交数量、平均成交价格、平均均价和平均成交周期
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="top10Chart"></div>
                    </div>
                </div>
            </div>

            <!-- 房型分布饼图 -->
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class="card-header bg-info">
                        <i class="bi bi-grid me-2"></i>房型分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="houseTypeCould"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 朝向分类雷达图 -->
        <div class="row mt-4">
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class="card-header bg-warning">
                        <i class="bi bi-sun me-2"></i>朝向分类
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="directionRadar"></div>
                    </div>
                </div>
            </div>

            <!-- 装修类型分布柱状图 -->
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <i class="bi bi-palette me-2"></i>装修类型分布
                    </div>
                    <div class="chart-container">
                        <div class="chart-wrapper" id="decorationBar"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        let currentCity = '广州'; // 默认城市为广州

        async function fetchCityData(city) {
            try {
                const response = await fetch(`../data/cj/成交分类/${city}_成交分类统计结果.json`);
                const data = await response.json();
                return data;
            } catch (error) {
                console.error(`获取${city}数据失败:`, error);
                return null;
            }
        }

        function initCharts(data) {
            if (!data) return;

            // 初始化快速概要
            document.getElementById('avgPrice').textContent = data['平均成交价格（万）'] || '暂无数据';
            document.getElementById('avgUnitPrice').textContent = data['平均均价（元/㎡）'] || '暂无数据';
            document.getElementById('priceStatus').textContent = Object.entries(data['价格数据状态'] || {})
                .map(([key, value]) => `${key}: ${value}`)
                .join('|') || '暂无数据';

            // 成交时间分布折线图
            const chart1 = echarts.init(document.getElementById('transactionTime'));
            const option1 = {
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: Object.keys(data.成交时间).sort() },
                yAxis: { type: 'value' },
                series: [
                    {
                        data: Object.keys(data.成交时间).sort().map(date => data.成交时间[date]),
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            chart1.setOption(option1);

            // 成交价格区间分布柱状图
            const chart2 = echarts.init(document.getElementById('totalPriceBar'));
            const option2 = {
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: Object.keys(data.成交价格区间) },
                yAxis: { type: 'value' },
                series: [
                    {
                        data: Object.values(data.成交价格区间),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
                        label: { show: true, position: 'top' }
                    }
                ]
            };
            chart2.setOption(option2);

            // 均价区间分布柱状图
            const chart3 = echarts.init(document.getElementById('unitPriceBar'));
            const option3 = {
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: Object.keys(data.均价区间) },
                yAxis: { type: 'value' },
                series: [
                    {
                        data: Object.values(data.均价区间),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
                        label: { show: true, position: 'top' }
                    }
                ]
            };
            chart3.setOption(option3);

            // 差价分类（金额）饼图
            const chart4 = echarts.init(document.getElementById('priceDifference'));
            const option4 = {
                tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
                legend: {
                    data: Object.keys(data['差价分类（金额）']),
                    orient: 'horizontal',
                    bottom: 30
                },
                series: [
                    {
                        name: '差价分类（金额）',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        data: Object.entries(data['差价分类（金额）']).map(([name, value]) => ({ name, value })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            chart4.setOption(option4);

            // TOP10 小区柱状折线图
            const chart5 = echarts.init(document.getElementById('top10Chart'));
            const option5 = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        let htmlStr = `<div><div><strong>${params[0].name}</strong></div>`;
                        params.forEach(param => {
                            htmlStr += `<div>${param.seriesName}: ${param.value}${param.seriesName.includes('均价') ? '元/㎡' : param.seriesName.includes('周期') ? '天' : ''}</div>`;
                        });
                        return htmlStr;
                    }
                },
                legend: {
                    data: ['成交数量', '平均成交价格（万）', '平均均价（元/㎡）', '平均成交周期（天）'],
                    orient: 'horizontal',
                    top: 'bottom',
                    selectedMode: 'multiple'
                },
                xAxis: {
                    type: 'category',
                    data: data.top10小区.map(item => item.小区),
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '成交数量',
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '价格（万/元）',
                        position: 'right'
                    },
                    {
                        type: 'value',
                        name: '周期（天）',
                        position: 'right',
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '成交数量',
                        type: 'bar',
                        data: data.top10小区.map(item => item.成交数量),
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    },
                    {
                        name: '平均成交价格（万）',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.top10小区.map(item => item["平均成交价格（万）"] || 0)
                    },
                    {
                        name: '平均均价（元/㎡）',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.top10小区.map(item => item["平均均价（元/㎡）"] || 0)
                    },
                    {
                        name: '平均成交周期（天）',
                        type: 'line',
                        yAxisIndex: 2,
                        data: data.top10小区.map(item => item["平均成交周期（天）"] || 0)
                    }
                ]
            };
            chart5.setOption(option5);

            // 房型分布饼图
            const chart6 = echarts.init(document.getElementById('houseTypeCould'));
            const option6 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    data: Object.keys(data.房型),
                    orient: 'vertical',
                    right: 10,
                    top: 'center'
                },
                series: [
                    {
                        name: '房型',
                        type: 'wordCloud',
                        shape: 'circle',
                        left: 'center',
                        top: 'center',
                        width: '90%',
                        height: '90%',
                        right: null,
                        bottom: null,
                        sizeRange: [12, 50],
                        rotationRange: [-45, 45],
                        rotationStep: 15,
                        textStyle: {
                            fontFamily: 'monospace',
                            fontWeight: 'bold',
                            color: function() {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            textStyle: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: Object.entries(data.房型).map(([name, value]) => ({ name, value }))
                    }
                ]
            };
            chart6.setOption(option6);

            // 朝向分类雷达图
            const chart7 = echarts.init(document.getElementById('directionRadar'));
            const option7 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}套'
                },
                radar: {
                    indicator: Object.entries(data.朝向分类).map(([name, value]) => ({
                        name,
                        max: Math.max(...Object.values(data.朝向分类)) * 1.2
                    })),
                    radius: '65%',
                    splitNumber: 5,
                    axisName: { fontSize: 11 }
                },
                series: [
                    {
                        name: '朝向分类',
                        type: 'radar',
                        data: [
                            {
                                value: Object.entries(data.朝向分类).map(([name, value]) => value),
                                name: '朝向分布',
                                areaStyle: {
                                    color: 'rgba(70, 130, 180, 0.2)'
                                },
                                lineStyle: {
                                    color: '#4682B4',
                                    width: 2
                                },
                                itemStyle: {
                                    color: '#4682B4'
                                },
                            }
                        ]
                    }
                ]
            };
            chart7.setOption(option7);

            // 装修类型分布柱状图
            const chart8 = echarts.init(document.getElementById('decorationBar'));
            const option8 = {
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: Object.keys(data.装修) },
                yAxis: { type: 'value' },
                series: [
                    {
                        data: Object.values(data.装修),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
                        label: { show: true, position: 'top' }
                    }
                ]
            };
            chart8.setOption(option8);

        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 默认加载广州数据
            fetchCityData(currentCity).then(data => {
                initCharts(data);
            });

            // 城市选择器事件监听
            document.getElementById('citySelector').addEventListener('change', function() {
                const selectedCity = this.value;
                if (selectedCity) {
                    currentCity = selectedCity;
                    fetchCityData(currentCity).then(data => {
                        initCharts(data);
                    });
                }
            });
        });
    </script>
</body>
</html>